<template>
  <a-modal
    :visible="visible"
    :confirm-loading="confirmLoading"
    title="拾取坐标"
    :ok-text="'确认保存'"
    width="90%"
    @cancel="
      () => {
        $emit('change-visible', false)
      }
    "
    @ok="submitEdit"
  >
    <slot name="form-info"></slot>
    <div>拾取结果： 经度 {{ longitudeGet }}, 纬度 {{ latitudeGet }}</div>
    <el-amap
      ref="map"
      style="width: 100%; height: 600px;"
      class="amap-box amap-page-container"
      :vid="'amap-get-point'"
      :center="mapData.center"
      :zoom="mapData.zoom"
      :plugin="mapData.plugin"
    >
      <el-amap-search-box
        class="search-box"
        :search-option="searchOption"
        :on-search-result="onSearchResult"
        deafault=""
      />
      <el-amap-marker
        v-for="(marker, index) in mapData.markers"
        :key="'marker' + index"
        :position="marker.position"
        :events="marker.events"
        :visible="marker.visible"
        :draggable="marker.draggable"
      />
      <el-amap-text
        v-for="(text, index) in mapData.texts"
        :key="'text' + index"
        :text="text.text"
        :offset="text.offset"
        :position="text.position"
        :events="text.events"
      />
    </el-amap>
    <div>
      <a-button @click="getMapCenter">
        以地图中心拾取
      </a-button>
    </div>
  </a-modal>
</template>

<script>
export default {
  model: {
    //event:什么时候触发v-model行为
    event: "change-visible",
    // 定义传递给v-model的那个变量，绑定到哪个属性值上
    prop: "visible",
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    longitude: {
      type: Number,
      default: 0,
    },
    latitude: {
      type: Number,
      default: 0,
    },
    confirmLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      longitudeGet: 116.39745,
      latitudeGet: 39.909174,
      address: "",
      searchOption: {
        city: "深圳",
        citylimit: false,
      },
      //地图
      mapData: {
        zoom: 14,
        center: [116.39745, 39.909174],
        plugin: [
          "ToolBar",
          {
            pName: "MapType",
            defaultType: 0,
            events: {
              init(o) {
                console.log(o)
              },
            },
          },
        ],
        markers: [],
        texts: [],
      },
    }
  },
  mounted() {
    if (
      this.longitude &&
      this.longitude * 1 > 0 &&
      this.latitude &&
      this.latitude * 1 > 0
    ) {
      this.longitudeGet = this.longitude
      this.latitudeGet = this.latitude
    }

    this.mapInit()
  },
  methods: {
    getMapCenter() {
      let tmp = this.$refs.map.$$getCenter()
      this.longitudeGet = tmp[0]
      this.latitudeGet = tmp[1]

      this.mapInit()
    },
    onSearchResult(pois) {
      if (!pois) return
      let latSum = 0
      let lngSum = 0
      if (pois.length > 0) {
        pois.forEach(({ lng, lat }) => {
          lngSum += lng
          latSum += lat
        })
        this.longitudeGet = lngSum / pois.length
        this.latitudeGet = latSum / pois.length
        this.mapInit()
      }
      return null
    },
    async mapInit() {
      this.mapData.markers = []
      this.mapData.markers.push({
        position: [this.longitudeGet, this.latitudeGet],
        events: {
          dragend: (e) => {
            this.longitudeGet = e.lnglat.lng
            this.latitudeGet = e.lnglat.lat
            this.mapData.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
          },
        },
        visible: true,
        draggable: true,
      })

      this.mapData.center = [this.longitudeGet, this.latitudeGet]
    },
    submitEdit() {
      this.$emit("change-visible", false)
      this.$emit("change", this.longitudeGet, this.latitudeGet, this.address)
    },
  },
}
</script>

<style scoped>
.amap-demo {
  height: 300px;
}

.search-box {
  position: absolute;
  top: 10px;
  left: 80px;
}

.amap-page-container {
  position: relative;
}
</style>
